<template>
  <view class="section">
    <view class="top">
      <view class="title"> AI阅读考试-词智成文 </view>
      <view class="tabs">
        <view
          class="tabs_item"
          v-for="(item, index) in typeList"
          :key="index"
          :class="{
            active: index === currentIndex,
          }"
          @click="handleChangeType(index)"
        >
          <view class="tabs_text"> {{ item.name }} </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="article" v-if="currentIndex === 0">
        <view class="article_title">{{ articleInfo.articleTitle }}</view>
        <view
          class="article_content"
          v-html="articleInfo.articleContent"
        ></view>
      </view>
      <view class="sentence" v-if="currentIndex === 1">
        <view class="sentence_content">
          <view class="sentence_img">
            <image src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/line_bg.png" mode="scaleToFill" />
          </view>
          <view class="sentence_box">
            <view class="sentence_list">
              <view
                class="sentence_item"
                v-for="(item, index) in sentenceList"
                :key="index"
              >
                <view class="sentence_number">
                  {{ index + 1 }}
                </view>
                <view class="sentence_text">
                  <view>
                    {{ item.sentence }}
                  </view>
                  <view v-show="item.isShowChinese">
                    {{ item.trans }}
                  </view>
                </view>
                <view class="sentence_icon">
                  <view @click="playSingleAudio(item)">
                    <image
                      style="width: 41rpx"
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/yinliang2.png"
                      mode="widthFix"
                    />
                  </view>
                  <view @click="showChinese(item)">
                    <image
                      style="width: 30rpx"
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/yi.png"
                      mode="widthFix"
                    />
                  </view>
                  <view @click="evaluation(item)">
                    <image
                      style="width: 30rpx"
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/common/luyin2.png"
                      mode="widthFix"
                    />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="question" v-if="currentIndex === 2">
        <view class="question_content">
          <view class="num">
            <view
              class="num_text"
              v-for="(item, index) in questionList"
              :key="index"
              :class="{
                active: currentQuestionIndex === index,
              }"
            >
              <text>{{ index + 1 }}</text>
            </view>
          </view>
          <view class="list">
            <view
              class="item"
              v-for="(item, index) in questionList"
              :key="index"
              v-if="currentQuestionIndex === index"
            >
              <view class="item_title">
                {{ index + 1 }}. {{ item.question }}
              </view>
              <view class="options">
                <view
                  class="options_container"
                  v-for="(ele, i) in item.optionsList"
                  :key="i"
                  @click="choiceAnswer(item, ele)"
                  :class="{ active: item.choiceAnswer === ele.name }"
                >
                  <view class="options_content">
                    {{ ele.value }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="question_btn">
          <view @click="prev()">
            <text>上一题</text>
          </view>
          <view @click="submit()">
            <text>提交</text>
          </view>
          <view @click="next()">
            <text>下一题</text>
          </view>
        </view>
      </view>
    </view>
    <u-popup
      class="custom-popup"
      v-model="show1"
      :zoom="false"
      mode="center"
      width="100%"
      height="100%"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask1">
        <view class="mask1_content">
          <view class="mask1_box">
            <view class="mask1_title"> 你已经学完了单词听写测试! </view>
            <view class="mask1_text">
              <text style="color: #080808">完成阅读考试赢</text>
              <text style="color: #c8123d">{{ questionList.length }}枚</text>
              <text style="color: #1775ff">金币</text>
            </view>
            <view class="mask_btn" @click="startExamination()">
              <text>AI阅读考试</text>
            </view>
            <view class="mask_img">
              <image
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/cartoon_bg2.png"
                mode="scaleToFill"
              />
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup
      class="custom-popup"
      v-model="show2"
      :zoom="false"
      mode="center"
      width="829rpx"
      height="962rpx"
      :mask-close-able="false"
      :mask-custom-style="{
        background: 'rgba(0, 0, 0, 0.5)',
      }"
    >
      <view class="mask2">
        <view class="mask2_content">
          <view class="mask2_text"> 本次答对正确{{ rightNum }}个</view>
          <view class="mask2_text">恭喜获得</view>
          <view class="mask2_num"> {{ gold }}枚金币 </view>
        </view>
      </view>
      <view class="mask2_btn" @click="back()">
       <view class="mask2_btn_content">
        <text>返回</text>
       </view>
      </view>
    </u-popup>
    <SentenceReadingEvaluation
      ref="SentenceReadingEvaluation"
      :sentenceInfo="sentenceInfo"
    ></SentenceReadingEvaluation>
  </view>
</template>

<script>
import { getKsDetail, saveKs } from "@/api/sync";
import SentenceReadingEvaluation from "./SentenceReadingEvaluation.vue";
export default {
  components: { SentenceReadingEvaluation },
  props: {
    chapterId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      typeList: [
        {
          name: "单词",
        },
        {
          name: "逐句跟读",
        },
        {
          name: "做题",
        },
      ],
      currentIndex: 0,
      articleInfo: {},
      sentenceList: [],
      questionList: [],
      currentQuestionIndex: 0,
      rightNum: 0,
      gold: 0,
      sentenceInfo: {},
      show1: false,
      show2: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getKsDetail(this.chapterId).then((res) => {
        this.articleInfo = res.data;
        this.sentenceList = res.data.sentenceList;
        this.questionList = res.data.questionList;
        this.questionList.forEach((item) => {
          let optionsList = [];
          if (item.optiona) {
            optionsList.push({
              name: "A",
              value: item.optiona,
            });
          }
          if (item.optionb) {
            optionsList.push({
              name: "B",
              value: item.optionb,
            });
          }
          if (item.optionc) {
            optionsList.push({
              name: "C",
              value: item.optionc,
            });
          }
          if (item.optiond) {
            optionsList.push({
              name: "D",
              value: item.optiond,
            });
          }
          this.$set(item, "optionsList", optionsList);
          this.$set(item, "choiceAnswer", "");
          this.$set(item, "isCorrect", false);
        });
        this.show1 = true;
      });
    },
    startExamination() {
      this.show1 = false;
    },
    handleChangeType(index) {
      if (this.currentIndex === index) return;
      this.currentIndex = index;
    },
    playSingleAudio(item) {
      let audio = uni.createInnerAudioContext();
      audio.src = item.usAudio;
      audio.play();
    },
    showChinese(item) {
      if (item.isShowChinese) {
        this.$set(item, "isShowChinese", false);
      } else {
        this.$set(item, "isShowChinese", true);
      }
    },
    evaluation(item) {
      this.sentenceInfo = item;
      this.$refs.SentenceReadingEvaluation.open();
    },
    choiceAnswer(item, option) {
      this.$set(item, "choiceAnswer", option.name);
    },
    prev() {
      if (this.currentQuestionIndex === 0) return;
      this.currentQuestionIndex--;
    },
    next() {
      if (this.currentQuestionIndex === this.questionList.length - 1) return;
      this.currentQuestionIndex++;
    },
    submit() {
      this.questionList.forEach((item) => {
        if (item.choiceAnswer === item.answer) {
          this.rightNum++;
          item.isCorrect = true;
        }
      });
      let params = {
        answers: this.questionList.map((item) => {
          return {
            id: item.id,
            right: item.isCorrect,
            userAnswer: item.choiceAnswer,
          };
        }),
        articleId: this.articleInfo.id,
        chapterId: this.chapterId,
        type: "dclx",
      };
      saveKs(params).then((res) => {
        this.gold = res.data.gold;
        this.show2 = true;
      });
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordStep7";
</style>
